<template>
  <a-modal
    v-model="visible"
    title="提示"
    :footer="null"
    :closable="false"
    :maskClosable="false"
    :keyboard="false"
    :zIndex="9999"
    width="424px"
    class="del-modal"
  >
    <div class="del-box">
      <div>
        <a-icon type="info-circle" theme="filled" class="del-icon" />
      </div>
      <div style="margin-left: 18px;">
        <div class="del-title" v-if="title">{{ title }}</div>
        <div class="del-desc" v-if="desc">{{ desc }}</div>
      </div>
    </div>
    <div class="del-btn">
      <a-button
        @click="
          $emit('update:visible', false);
          $emit('onCancel');
        "
        class="mr12"
        >{{ cancelText }}</a-button
      >
      <a-button
        type="primary"
        @click="
          $emit('update:visible', false);
          $emit('onOk');
        "
      >
        {{ okText }}
      </a-button>
    </div>
  </a-modal>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ""
    },
    desc: {
      type: String,
      default: ""
    },
    okText: {
      type: String,
      default: "确定"
    },
    cancelText: {
      type: String,
      default: "取消"
    }
  }
};
</script>

<style lang="scss" scoped>
.del-modal {
  ::v-deep .ant-modal-header {
    border: 0 !important;
  }
  .del-box {
    display: flex;
    .del-icon {
      font-size: 22px;
      color: var(--primary);
    }
    .del-title {
      color: #55565d;
      margin-bottom: 12px;
    }
    .del-desc {
      color: #a6a8b4;
    }
  }
  .del-btn {
    text-align: right;
    margin-top: 52px;
  }
}
</style>
